import { FC, useEffect, useState } from 'react'
import { useStyles } from '@/hooks/styles'
import styles from './TextAssetCard.module.scss'
import { MethodLayout } from '@/components/MethodLayout/MethodLayout'
import { Input, Button as AntdButton } from 'antd'
import { Graph, Node } from '@antv/x6'
import { Requirement } from '@/components/icons/Requirement'
import { SvgIcon } from '@/components/icons'
import { useLang } from '@/hooks/i18n'
import lang from './RequirementInput.i18n.json'
import { StaticLayout } from '@/components/StaticLayout/StaticLayout'
import { motionEasing } from '@/config'
import { motion } from 'framer-motion'
import { useGraphStore, useMetaStore, useWtsStore } from '@/hooks'
import { Message } from '@arco-design/web-react'
import { observer } from 'mobx-react'
import { UUID } from '@/store/metaStore'

// 创新方法-需求输入与总结
export const TextAssetCardWithMotion =
  (cardID: UUID, cardIndex: number) =>
  // eslint-disable-next-line react/display-name
  ({ node, graph }: { node: Node; graph: Graph }) => {
    const { t } = useLang(lang, 'TextAssetCard')
    return (
      <motion.div
        initial={{ opacity: '0%', y: 20 }}
        animate={{ opacity: '100%', y: 0 }}
        transition={{ ...motionEasing, duration: 0.6 }}
      >
        <MethodLayout
          name={t`Requirement Analysis`}
          icon={<SvgIcon icon={Requirement} />}
        >
          <TextAssetCard
            node={node}
            graph={graph}
            isFrozen={false}
            content={''}
            cardID={cardID}
          />{' '}
          {/* TODO */}
        </MethodLayout>
      </motion.div>
    )
  }

interface IRequirementInput {
  node: Node
  graph: Graph
  isFrozen: boolean // TODO
  content: string
  cardID: UUID
}
export const TextAssetCard: FC<IRequirementInput> = observer(
  ({ node, graph, isFrozen, content, cardID }) => {
    const { t } = useLang(lang, 'TextAssetCard')
    const styleClass = useStyles(styles)
    const metaStore = useMetaStore()

    const [inputValue, setInputValue] = useState<string>(content)

    const onChange = (value: string) => {
      setInputValue(value)
      // metaStore.cardContext.set(cardID, value)
    }

    return (
      <div {...styleClass(['layout'])}>
        <StaticLayout>
          <Input.TextArea
            placeholder={''}
            disabled={isFrozen}
            maxLength={800}
            showCount={true}
            autoSize={{ minRows: 5, maxRows: 12 }}
            value={inputValue}
            onChange={(e) => onChange(e.target.value)}
          ></Input.TextArea>
        </StaticLayout>
      </div>
    )
  }
)
